<!-- systemUserManage -->
<template>
  <box-layout>
    <template v-slot:header>
      <box-title title="查询条件"><i class="el-icon-arrow-down" /> </box-title>
      <my-form ref="searchRef" :model="formDatas" :items-datas="itemsDatas" :form-datas="formDatas" :rules="rules">
        <my-button @click="resetForm('searchRef')">重置</my-button>
        <my-button type="primary" @click="submitForm('searchRef')">提交</my-button>
      </my-form>
    </template>
    <box-title title="人员列表" />
    <my-table
      :data="tableData"
      :table-columns="columns"
      :multiple-selection.sync="multipleSelection"
      has-pagination
      :hide-on-single-page="false"
      :page-num="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      :total="pageInfo.total"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    >
      <template v-slot:status="{row}">{{ row.status == -1 ? '禁封' : row.status == 1 ? '正常' : '-' }}</template>
      <template v-slot:gend="{row: {gend}}">{{ gend == 1 ? '女' : gend == 2 ? '男' : '-' }}</template>
      <template v-slot:action="scope">
        <a @click="fn(scope)">delete</a>
      </template>
    </my-table>
  </box-layout>
</template>
<script>
import dataMix from './dataMix'
export default {
  name: 'SystemUserManage',
  components: {},
  mixins: [dataMix],
  data() {
    return {
      drawerVisiable2: false,
      addVisiable2: false,

      checkValue: true,
      selectVal: '',
      selectOptions: [{ label: 'aaa', value: 'aaa' }, { label: 'bbb', value: 'bbb', disabled: true }, { label: 'ccc', value: 'ccc' }]
    }
  },
  computed: {},
  watch: {
    '$route.query.data': {
      handler: function(val) {
        console.log(val, this.pageInfo)
        // alert('watch: ', val)
      }
      // immediate: true,
      // deep: true
    }
  },
  mounted() {
    this.addFormDatas = this.formDatas
    this.addItemsDatas = [...this.itemsDatas]
  },

  methods: {
    confirmBoxFn() {
      this.$msgConfirm().then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    copyIconFn(val) {
      this.$myCopyClip(`el-icon-${val}`)
      this.$notifySuccess(`el-icon-${val}复制成功`)
    },
    del(scope) {
      alert(scope.row)
    },
    fn(scope) {
      console.log(scope)
    },
    handleSizeChange(page) {
      this.pageInfo.pageNum = 1
      this.pageInfo.pageSize = page.pageSize
      // this.page.pageSize = page.pageSize
    },
    handleCurrentChange(page) {
      this.pageInfo.pageNum = page.pageNum
    },
    resetForm(formRef) {
      this.$refs[formRef].resetFields()
    },
    submitForm(formRef) {
      this.$refs[formRef].validate(valid => {
        if (valid) alert('submit')
        else alert('submit error!')
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.icon-block {
  font-size: 32px;
  color: #606266;
  padding: 2* $const;
  cursor: pointer;
  &:hover {
    color: $menuActiveText;
    background-color: #f0f0f0;
    transition: all 0.5s;
  }
  // border-right: 1px solid #88898c;
  // border-bottom: 1px solid #88898c;
}

</style>
